
{extend name="common/main"}

{block name="css"}
<!-- 本页面需要额外添加的css请在此处添加 -->
<link rel="stylesheet" href="/mobiled/css/public.css">
<link rel="stylesheet" href="/mobiled/css/goods.css" type="text/css"/>
<link rel="stylesheet" href="/mobiled/css/layer.css" type="text/css"/>
<link href="/mobiled/css/photoswipe.css" rel="stylesheet" type="text/css">


{/block}

{block name="body"}


<body>
<div class="main">
    <div class="tab_nav">
        <div class="header">
            <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"></a></div>
            <div class="h-mid">
                <ul>
                    <li><a href="javascript:;" class="on" id="goods_ka1" onclick="setGoodsTab('goods_ka',1,3)">商品</a></li>
                    <li><a href="javascript:;" class="" id="goods_ka2" onclick="setGoodsTab('goods_ka',2,3)">详情</a></li>
                    <li><a href="javascript:;" class="" id="goods_ka3" onclick="setGoodsTab('goods_ka',3,3)">评价</a></li>
                </ul>
            </div>
            <div class="h-right">
                <aside class="top_bar">
                    <div onclick="show_menu();$('#close_btn').addClass('hid');" id="show_more"><a href="javascript:;"></a> </div>
                    <a href="{:url('shoppingtrolley')}" class="show_cart"><em class="global-nav__nav-shop-cart-num" id="cart_quantity">0</em></a>
                </aside>
            </div>
        </div>
    </div>
  {include file="common/goods_nav"}

    <div class="main" id="user_goods_ka_1" style="display: block;">

        <div class="banner">
            <div id="slider" class="slider" style="overflow: hidden; visibility: visible; list-style: none; position: relative;">
                <ul id="sliderlist" class="sliderlist" style="position: relative; overflow: hidden; transition: left 600ms ease; -webkit-transition: left 600ms ease;">
                    {foreach  name="goods_images" item="pic"}
                        <li style="float: left; display: block; width: 100%;">
                            <span><a  href="{$pic.image_url}"><img title="" width="100%" src="{$pic.image_url}"></a></span>
                        </li>
                    {/foreach}
                </ul>
                <div id="pagenavi">
                    {foreach  name="goods_images" item="pic" key="k"}
                        <a href="javascript:void(0);" {if condition="$k eq 0"}class="active"{/if}></a>
                    {/foreach}
                </div>
            </div>
            <!--<div id="slider" class="slider" style="overflow: hidden; visibility: visible; list-style: none; position: relative;">-->
                <!--<ul id="sliderlist" class="sliderlist" style="position: relative; overflow: hidden; transition: left 600ms ease 0s; width: 2055px; left: -1644px;">-->
                    <!--{foreach name="goods_images" item="v"}-->
                    <!--<li style="float: left; display: block; width: 411px;">-->
                        <!--<span><a href="javascript:void(0)">-->
                            <!--<img title="" width="100%" src="{$v.image_url}">-->
                        <!--</a></span>-->
                    <!--</li>-->
                    <!--{/foreach}-->
                <!--</ul>-->
                <!--<div id="pagenavi">-->
                    <!--{foreach name="goods_images" item="v"}-->
                    <!--<a href="javascript:void(0);" class=""></a>-->
                    <!--{/foreach}-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <div class="s_bottom"></div>
        <form name="buy_goods_form" method="post" id="buy_goods_form">
            <div class="product_info">
                <div class="info_dottm">
                    <h3 class="name">{$goods.goods_name}</h3>
                    <div class="right">
                        <!-- JiaThis Button BEGIN -->
                        <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt" target="_blank">
                            <div id="pro_share" class="share"></div>
                        </a>
                    </div>
                </div>
                <dl class="goods_price">

                    <dt>

                        <span id="goods_price">￥{notempty name="$spec_goods.0"}{$spec_goods.0.price}{else}{$goods.shop_price}{/notempty}元</span>
                        <font id="font_price">￥{notempty name="$spec_goods.0"}{$spec_goods.0.price_tall}{else}{$goods.market_price}{/notempty}元</font>
                        <!--<font>￥{$goods.market_price}元</font> -->


                    </dt>
                </dl>
                <ul class="price_dottm">
                    <!--<li style=" text-align:left">折扣：9.7折</li>-->
                    <li>{$comment_count}人评价</li>
                    <li id="spec_goods">库存：{notempty name="$spec_goods.0"}{$spec_goods.0.store_count}{else}{$goods.store_count}{/notempty}</li>
                    <li style=" text-align:right">成交量：{$goods_num}</li>
                </ul>
            </div>

            <!-------商品属性-->
            <section id="search_ka">
                属性
                <div class="ui-sx bian1">
                    <div class="subNavBox">
                        <div class="subNav on"><strong>选择商品属性</strong></div>
                        <ul class="navContent" style="display: block;">
                            {notempty name="spec"}
                            {foreach name="spec" key="k" item="v"}
                            <li>
                                <div class="title">{$v.spec_name}</div>
                                <div class="item">
                                    {notempty name="$v.item"}
                                    {foreach name="v.item" key="key" item="value"}
                                    <a href="javascript:;" onclick="switch_spec(this);" title="42" {if in_array($key,$v.itemd)}  class="hover" checked="checked" {/if}>
                                        <input type="radio" class="itemgoods" style="display:none;" name="item[{$v.s_id}]" value="{$key}" {if in_array($key,$v.itemd)} checked="checked" {/if} >
                                        {$value}
                                    </a>
                                    {/foreach}
                                    {/notempty}
                                </div>
                            </li>
                            {/foreach}
                            {/notempty}
                        </ul>
                    </div>
                </div>
            </section>
            <!-------商品属性-->

            <div class="ui-sx bian1">
                <div class="subNavBox">
                    <div class="subNav on"><strong>购买数量</strong></div>
                    <ul class="navContent" style="display: block;">
                        <li style=" border-bottom:1px solid #eeeeee">
                            <div class="item1">
                  <span class="ui-number">
                  <button type="button" class="decrease" onclick="goods_cut();">-</button>
                    <input type="text" class="num" id="number" name="goods_add" value="1" min="1" max="1000">
                    <input type="hidden" name="goods_id" value="{$goods.goods_id}">
                  <button type="button" class="increase" onclick="goods_addd();">+</button>
                  </span> </div>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
            <section id="">
                <div class="ui-sx bian1">
                    <div class="subNavBox" style="margin-bottom:50px ">
                        <div class="subNav"><strong>会员专享价</strong></div>
                        <ul class="navContent">
                            <li class="user_price">
                                {foreach name="user_lever" item="v"}
                                <p> <span class="key">{$v.level_name}：</span> <b class="p-price-v">{$v.discount/10}折</b> </p>
                                {/foreach}
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <div style=" height:8px; background:#eeeeee; margin-top:-1px;"></div>

    </div>
    <div class="main" id="user_goods_ka_2" style="display: none;">
        <div class="product_main" style=" margin-top:40px;"> <!-- 产品图片 -->
            <div class="product_images product_desc" id="product_desc">
                {foreach name="goods_images" key="k" item="v"}
                <p><img src="{$v.image_url}" style="float:none;" title="000000000122972926_2_400x400.jpg"></p>
                {/foreach}
                <p><br></p>
            </div>
        </div>
        <section class="index_floor">
            <h2 style=" border-bottom:1px solid #ddd "> <span></span> 商品信息 </h2>
            <ul class="xiangq" style="margin-bottom: 30px">
                {foreach name="goodAttr" item="v"}
                <li><p>{$v.attr_name}:</p><span>{$v.attr_value}</span></li>
                {/foreach}
            </ul>
        </section>
    </div>
    <div class="tab_attrs tab_item hide" id="user_goods_ka_3" style="display: none;">

        <div id="ECS_COMMENT">

            <div class="my_comment_list" id="ECS_MYCOMMENTS"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <!---晒单end-->
                <div class="comment_list" id="commentList" style="margin-bottom: 50px">
                    <ul>
                        {foreach name="comment" item="v"}
                        <li class="comment_item">
                            <div class="content_head" style="border-bottom:1px solid #CCC;">
                                <div class="info">
                                    <div class=" comment_star">
                                        <div class="one">
                                            <em><img src="{$v.headimg}" width="80px"><span></span></em><!--头像-->
                                        </div>
                                        <div class="name">{$v.username}<!--昵称-->
                                            <em><img src="/mobiled/images/start/stars{$v.goods_rank}.gif" alt=""></em><!--星级-->
                                        </div>

                                        <div class="two">{$v.add_time|date='Y-m-d H:i:s',###}</div><!--时间-->
                                    </div>
                                </div>
                                <p> {$v.content}</p><!--评论-->
                                {notempty  name="$v.imgs"}
                                <!---晒单-->
                                <div class="sd_img">
                                    <dl id="gallery">
                                        <!--评论附加图-->
                                        {foreach name="$v.imgs" key="key" item="val"}
                                        <dd>
                                            <a href="{$val}">
                                                <img src="{$val}" width="100px" heigth="100px">
                                            </a>
                                        </dd>
                                        {/foreach}


                                    </dl>
                                </div>
                                {/notempty}
                                <!--管理员回复-->
                                {notempty name="$v.admin_comment"}
                                {foreach name="$v.admin_comment" key="key" item="val"}
                                <div style="font-size: 10px" class="one">商家回复：{$val.content}</div><div class="two">{$val.add_time|date='Y-m-d H:i:s',###}</div>
                                <br>
                                {/foreach}
                                {/notempty}
                            </div>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="footer_nav">
    <ul>
        <li class="bian"><a href="{:url('Index/index')}"><em class="goods_nav1"></em><span>首页</span></a> </li>
        <li class="bian"><a href="{:url('Index/service')}"><em class="goods_nav2"></em><span>客服</span></a> </li>
        {notempty name="collect"}
        <li><a onclick="collect({$goods.goods_id})" id="favorite_add"><em class="goods_nav3" style=" display:block; width:30px; height:25px; margin:auto;background: url(/mobiled/images/shouchang2.png) no-repeat;width: 18px;height: 24px;margin-top: 5px;" alt=""></em><span>收藏</span></a></li>
        {else}
        <li><a onclick="collect({$goods.goods_id})" id="favorite_add"><em class="goods_nav3"></em><span>收藏</span></a></li>
        {/notempty}
    </ul>
    <dl>
        <dd class="flow"><a class="button active_button" href="javascript:void(0);" onclick="roleSubmit();">加入购物车</a> </dd>
        <dd class="goumai"><a style="display:block;" href="javascript:void(0);" onclick="roleSubmit('goumai');">立即购买</a> </dd>
    </dl>
</div>
</body>
{/block}

{block name="js"}
<!-- 本页面需要额外添加的js请在此处添加 -->

<script src="/mobiled/js/lefttime.js" type="text/javascript" ></script>
<script src="/mobiled/js/mobile.js" type="text/javascript" ></script>
<script src="/mobiled/js/klass.min.js"></script>
<script src="/mobiled/js/photoswipe.js"></script>
<script src="/mobiled/js/touchslider.dev.js" type="text/javascript" ></script>
<script src="/mobiled/js/common.js"></script>
<script src="/mobiled/js/zepto.min.js" type="text/javascript"></script>
<script src="/mobiled/js/filter.min.js" type="text/javascript"></script>

<!--<script src="http://v3.jiathis.com/code_mini/jia.js" type="text/javascript" charset="utf-8"></script>-->

<!--轮播图-->
<script type="text/javascript">
    $(function(){
        $("div.module_special .wrap .major ul.list li:last-child").addClass("remove_bottom_line");
    });
    var active=0,
        as=document.getElementById('pagenavi').getElementsByTagName('a');

    for(var i=0;i<as.length;i++){
        (function(){
            var j=i;
            as[i].onclick=function(){
                t2.slide(j);
                return false;
            }
        })();
    }
    var t2=new TouchSlider({id:'sliderlist', speed:600, timeout:6000, before:function(index){
            as[active].className='';
            active=index;
            as[active].className='active';
        }});
</script>
<script src="/layer/layer.js"></script>
<script>
    //属性切换
    function switch_spec(spec)
    {
        $(spec).siblings().removeClass('hover');
        $(spec).addClass('hover');
        $(spec).siblings().children('input').prop('checked',false);
        $(spec).children('input').prop('checked',true);
        //更新商品价格和库存
        get_goods_price();
    }
    //根据不同属性显示其价格、库存
    function get_goods_price() {
        $spec_goods='';
        {notempty name="$spec_goods"}
        $spec_goods={$spec_goods};
        {/notempty}
        if($spec_goods!=''){

            goods_spec_arr = new Array();
            $(".itemgoods:checked").each(function(){  //遍历将选中规格推入goods_spec_arr
                goods_spec_arr.push($(this).val());
            });
            var spec_key = goods_spec_arr.sort(sortNumber).join('-');  //排序后组合成 key
            $.each($spec_goods,function(k,v){
                if (spec_key==v.key) {
                    $("#goods_price").html("价格：￥"+v.price);
                    $("#font_price").html(v.price_tall);
                    $("#spec_goods").html("库存："+v.store_count);

                    return false;
                }
                    $("#goods_price").html("价格：￥"+{$goods.shop_price});
                    $("#spec_goods").html("库存：0");

            });
            // goods_price = spec_goods_price[spec_key]['price']; // 找到对应规格的价格
            // store_count = spec_goods_price[spec_key]['store_count']; // 找到对应规格的库存
            // console.log(goods_spec_arr);
            // console.log(spec_key);
            // console.log($spec_goods);
        }


        // console.log(store_count);

    }
    function sortNumber(a,b)
    {
        return a - b;
    }

    /*
    收藏
     */
    function collect(id){
        $.post("{:url('collect')}", {id: id}, function(res) {
            if (res.code != 200) {
                layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 2});
                return false;
            }

            layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 1}, function() {
                layer.closeAll('page');
                location.reload();
        });
    });

    }
    function goods_addd(){
        var num_val=document.getElementById('number');
        var new_num=num_val.value;
        var Num = parseInt(new_num);
        Num=Num+1;
        num_val.value=Num;
    }
    function goods_cut(){
        var num_val=document.getElementById('number');
        var new_num=num_val.value;
        var Num = parseInt(new_num);
        if(Num>1)Num=Num-1;
        num_val.value=Num;
    }

    $(".subNav").click(function(){
        $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(500);
        $(this).toggleClass("on").siblings(".subNav").removeClass("on");
        if($(".is_scroll").length <= 0)
        {
            $('html,body').animate({'scrollTop':$('body')[0].scrollHeight},600);
        }
    });
//加入购物车//提交

    function roleSubmit($goumai) {
        var form = document.getElementById("buy_goods_form");
        var formData = new FormData(form);
        $.ajax({
            url: "{:Url('ajaxAddCart')}",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success: function (res) {
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 2000, icon: 2},function () {
                        if (res.code==250){
                            window.location.href = "{:url('Login/login')}";
                        }
                    });


                    return false;
                }
                if ($goumai=='goumai'){
                    window.location.href = "{:url('shoppingtrolley')}";
                    return false;
                }
                layer.msg(res.msg, {shade: 0.5, time: 400, icon: 1}, function () {
                    window.location.reload();
                    layer.closeAll('page');
                });
            }
        })
    }
    /*
    统计购物车商品数量
     */
    $(document).ready(function(){
//        var cart_cn = getCookie('cn');
//        if(cart_cn == ''){
        $.ajax({
            type : "GET",
            url:"{:url('User/header_cart_list')}",
            success: function(data){
                cart_cn = getCookie('cn');
                $('#cart_quantity').html(cart_cn);
            }
        });
//        }
//        $('#cart_quantity').html(cart_cn);
    })
</script>

{/block}